<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>

<template>
    <div>

        <div>
            <el-button @click="toAdd" type="primary" style="float: left;margin: 10px">新增</el-button>
        </div>

        <!--数据列表-->
        <el-table
                size="medium"
                :data="tableData"
                border
                fit
                :row-class-name="tableRowClassName">
            <el-table-column
                    width="120"
                    label="序号"
                    type="index">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题">
            </el-table-column>

            <el-table-column
                    prop="startDate"
                    label="开始时间"
            >
            </el-table-column>

            <el-table-column
                    prop="endDate"
                    label="结束时间">
            </el-table-column>

            <el-table-column
                    prop="desc"
                    label="目标描述">
            </el-table-column>

            <el-table-column
                    prop="metrics"
                    label="衡量标准">
            </el-table-column>
            <el-table-column
                    prop="customer"
                    label="客户">
            </el-table-column>
            <el-table-column
                    prop="judges"
                    label="邀评人">
            </el-table-column>
            <el-table-column
                    prop="weights"
                    label="权重">
            </el-table-column>


            <el-table-column
                    prop="publicState"
                    label="目标公开">
            </el-table-column>


            <el-table-column
                    label="操作"
                    align="center">

                <template slot-scope="scope">
                    <el-button
                            @click="toEdit(scope.row)"
                            size="mini"
                    >编辑
                    </el-button>
                    <el-button
                            @click="dele(scope.row)"
                            size="mini"
                            type="danger"
                    >删除
                    </el-button>
                </template>
            </el-table-column>

        </el-table>

    </div>
</template>

<script>

    import {getData} from "../api/base_data_api"

    export default {
        name: "viewlist",
        components: {},
        data() {
            return {
                tableData: []
            }
        },

        methods: {


            dele(row) {

                let tableData2 = JSON.parse(this.cookie.getCookies("tableData"))
                for (let i = 0; i < tableData2.length; i++) {
                    if (row.title === tableData2[i].title) {
                        tableData2.splice(i, 1)
                    }
                }
                this.cookie.setCookies("tableData", JSON.stringify(tableData2))
                this.tableData = JSON.parse(this.cookie.getCookies("tableData"))
                //删除的思路

                //1.获取cookies中的tableData，赋值给一个新的tableData2 数组
                /*let tableData2 = JSON.parse(this.cookie.getCookies("tableData"))
                //2.根据 当前行对象的标题作为条件，然后循环tableData2数组，只要是”标题“等于"当前行对象的标题"的标题时


                //数组，一边循环，一边删除其中元素，这种操作不要用for循环，要用迭代器forEach(item,index)
                /!*    for (let i = 0; i < tableData2.length; i++) {
                        if (tableData2[i].title === row.title) {
                            // console.log("相同吗：：", tableData2[i].title, row.title)
                            tableData2.splice(i, 1); //删除下标为i的元素 0 1 2 3 4
                        }
                    }*!/


                /!*就算这里没有变更到到全局变量，也要想办法强制刷新当前页面*!/
                /!*vue内置的函数，用于强制刷新当前页面，这个函数，会在页面操作结束后，执行刷新*!/


                console.log("tableData2::", tableData2)*/
                // this.cookie.setCookies(JSON.stringify("tableData"))

                //3.就从tableData2中删除当前循环的对象

                //4.把tableData2覆盖掉cookies中的tableData

                //5.刷新列表页面

                //数组删除对象元素的方法有很多种，可以百度


            },


            tableRowClassName({rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },


            // 从cookie中获取数据
            getFormDate() {
                const tableData = this.cookie.getCookies("form");
                /*往数组中添加对象*/
                this.tableData.push(tableData)
            },
            /*获取列表数据*/
            getData() {
                getData().then(res => {
                    /*json数组覆盖掉tableData数组*/
                    this.tableData = res.data.list
                    // console.log("res::", res)
                })
            },

            /*新增*/
            toAdd() {
                /*第一种路由跳转方式：通过path跳转，传参身体必须是query*/
                // this.$router.push({path: '/addFrom', query: {id: '123'}})
                //获取参数：this.$route.query.id
                this.$router.push('addFrom')


                /*第二种跳转路由的方式：通过name跳转，传参体必须是params*/
                // this.$router.push({name: 'addFrom', params: {id: '123'}}) // 只能用 name
                //获取参数：this.$route.params.id

                /*区别：第一种方式，参数显示在路由地址栏中，第二种方式不会显示在地址栏中*/

                /*优缺点：第一种方式有数据安全有隐患，第二种方式没有*/


            },

            /*编辑*/
            toEdit(row) {
                /*携带关键参数，跳转到编辑页面*/
                this.$router.push({name: 'editFormData', params: {title: row.title}})
                //获取参数：this.$route.params.id

            }


        },


        created() {


        },


        mounted() {
            // this.getData()//先执行
            // this.getFormDate()//后执行
            // this.getFormDate()

            /*const tableData = this.cookie.getCookies("tableData")
            if (tableData == "[]" || tableData == null) {
                let tableData2 = [{
                    "title": "王小虎1",
                    "desc": "好",
                    "startDate": "2016-05-02",
                    "endDate": "2016-05-06",
                    "customer": "",
                    "weights": "20%",
                    "judges": "",
                    "publicState": "已公开",
                    "metrics": "",
                    "publicContent": ""
                }, {
                    "title": "王小虎2",
                    "desc": "好",
                    "startDate": "2016-05-02",
                    "endDate": "2016-05-06",
                    "customer": "",
                    "weights": "20%",
                    "judges": "",
                    "publicState": "已公开",
                    "metrics": "",
                    "publicContent": ""
                }]
                this.cookie.setCookies("tableData", JSON.stringify(tableData2))
            }
            //需要一个变量tableData2接收
            let tableData3 = this.cookie.getCookies("tableData")
            this.tableData = JSON.parse(tableData3)
            console.log("tableData::", this.tableData)*/


            const tableData = this.cookie.getCookies("tableData");
            console.log("这个cookies正常吗：：", tableData)
            if (tableData == null || tableData === "[]") {// ||短路或   &&短路与
                this.cookie.setCookies("tableData", JSON.stringify([{
                    "title": "标题",
                    "desc": "描述",
                    "startDate": "2016-05-02",
                    "endDate": "2016-05-06",
                    "customer": "客户",
                    "weights": 5,
                    "judges": "邀评人",
                    "publicState": "部分公开",
                    "metrics": "衡量标准",
                    "publicContent": "公开内容"
                }]), '7d')
            }
            let tableData2 = this.cookie.getCookies("tableData")
            this.tableData = JSON.parse(tableData2)
            console.log("dateList3::", this.tableData)


            /*const tableData = this.cookie.getCookies("tableData");
            if (tableData == null) {
                /!*如果cookies中不存在tableData,就创建，初始化默认值为[],但是cookies不能存空数组*!/
                /!*存对象到cookies的时候，先把对象转为json字符串，然后再存入cookies中，因为cookies只能存数字或字符串，如果把原始的
                * 对象形式存进去，数据会丢失。
                * 取出来的时候，再把json字符串转换为原始对象形式*!/

                let defaultList = [{
                    "title": "默认标题",
                    "desc": "默认描述",
                    "startDate": "2016-05-02",
                    "endDate": "2016-05-06",
                    "customer": "",
                    "weights": "20%",
                    "judges": "",
                    "publicState": "已公开",
                    "metrics": "",
                    "publicContent": ""
                }]


                this.cookie.setCookies("tableData", JSON.stringify(defaultList))
            }

*/
            /*let tableData2 = this.cookie.getCookies("tableData");
            this.tableData = JSON.parse(tableData2)
            console.log("字符串形式tableData::", tableData2)
            console.log("转换为数组形式了::",)*/


            // JSON.stringify(obj)//obj转string
            // JSON.parse(string)//string转obj


            // console.log("tableData::", JSON.parse(tableData2))


        },
        /*任何全局变量，只要变动，都会走进这里*/
        updated() {

        }

    }
</script>

<style scoped>

</style>
